<template>
    <div class="mylesson">
        <div class="mylesson_top">
            <h2>2022年8月</h2>
            <van-calendar :title="日历" :show-subtitle="false" :show-title="false" :poppable="false" :show-confirm="false"
                :style="{ height: '100px' }" />
            <div class="jinrik">
                <span>今日课程({{ studyCourseList.length }}节)</span>
                <div class="kebiao">
                    <img src="../../assets/下载 (3).png" alt="">
                    <p>课表</p>
                </div>
            </div>
        </div>
        <div class="mylesson_jilu">
            <ul>
                <li @click="$router.push('/studyData')">
                    <img src="https://wap.lexuemiao.com/img/history-full@3x.fd48535a.png" alt="">
                    <p>学习记录</p>
                </li>
                <li @click="$router.push('/studyRecode')">
                    <img src="https://wap.lexuemiao.com/img/ziliao@3x.6d7c3da4.png" alt="">
                    <p>学习资料</p>
                </li>
            </ul>
        </div>
        <div class="mylesson_bom">
            <div class="myl_bom_top">
                <!-- <p>正在学习的课程</p> -->
                <!-- <van-cell title="正在学习的课程" is-link value="查看更多" /> -->
                <van-cell value="查看更多" is-link>
                    <!-- 使用 title 插槽来自定义标题 -->
                    <template #title>
                        <span class="custom-title">正在学习的课程</span>
                    </template>
                </van-cell>
            </div>
            <div class="carefullyChosen_box">
                <van-empty description="描述文字" v-show="studyCourseList.length < 0" />
                <MyRecommendCourse :RecommendCourseList="studyCourseList"></MyRecommendCourse>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import MyRecommendCourse from "../../components/MyRecommendCourse.vue";
import { getstudyCourseListAPi } from '@/http/http'
import { useRouter } from "vue-router";
const { push } = useRouter();
// 数据类型
const data = reactive({
    studyCourseList: [],
});
// 收藏数据
const lingqu = async () => {
    let res = await getstudyCourseListAPi();
    console.log(res);
    data.studyCourseList = res.data;
};
lingqu();

const { studyCourseList } = toRefs(data);
</script>
<style scoped lang="scss">
.mylesson {
    width: 100vw;
    height: 100vh;

    .mylesson_top {
        width: 100%;
        height: 30%;

        .jinrik {
            display: flex;

            span {
                flex: 90%;
            }

            .kebiao {
                flex: 10%;

                img {
                    width: 50px;
                }

                p {
                    font-size: 25px;
                }
            }
        }
    }


    .mylesson_jilu {
        width: 100%;
        height: 250px;

        ul {
            display: flex;

            li {
                padding-top: 50px;
                padding-right: 50px;
                text-align: center;
                flex: 50%;
                font-size: 30px;

                img {
                    width: 100px;
                    height: 100px;
                }

                p {
                    font-weight: 700;
                }
            }
        }
    }


    .mylesson_bom {
        .myl_bom_top {
            .custom-title {
                font-size: 45px;
                font-weight: 700;
            }
        }

        .carefullyChosen_box {
            width: 100%;
            height: 500px;
        }
    }
}
</style>
